@import "./layout";
@import "./buttton";
html, body {
  //background: $mainThemeColor;
}




.text-center {
  text-align: center;
}
.warning {
  color: $warmColor;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}


.card {
  position: relative;
  margin-top: px2rem(80px);
  background-image: linear-gradient(180deg, #2500A6 0%, #190071 100%);
  border-radius: px2rem(20px);
  width: px2rem(700px);
  height: px2rem(721px);
  margin-left: auto;
  margin-right: auto;
}

.card-title {
  transform: translateY(px2rem(-50px));
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.rank-table {
  margin: 0 auto;
  width: px2rem(608px);
}

.rank-table-header {
  box-sizing: border-box;
  @include withBg("~@/assets/rank_table_header.png", px2rem(608px), px2rem(74px), center, top);
  width: 100%;
  height: px2rem(74px);
  font-size: px2rem(28.8px);
  color: #FF94C8;
  padding-left: px2rem(59px);
  padding-right: px2rem(20px);
}

.table-header {
  min-width: px2rem(90px);
}

.rank-lit {
  width: px2rem(580px);
  margin: 0 auto;
}

.rank-item {
  width: px2rem(580px);
  height: px2rem(103px);
  border-bottom: px2rem(1px) solid #7B55FF;
  box-sizing: border-box;
  padding-left: px2rem(59px);
  font-size: px2rem(28.8px);
  color: $short_video_title_color;
}

.table-col {
  min-width: px2rem(90px);
}